<template>
  <div
    ref="refChart"
    :class="className"
    :style="{ height: height, width: width, 'min-height': '120px' }"
  />
</template>

<script setup>
const props = defineProps({
  className: {
    type: String,
    default: 'nw-chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  },
  autoResize: {
    type: Boolean,
    default: true
  },
  xData: {
    type: Array,
    default: () => []
  },
  dataSource: {
    type: Object,
    default: () => ({data: [], total: 0})
  }
})

const refChart = ref(null)
const myChart = ref(null)

watch(
  () => props.dataSource,
  () => {
    console.log('props.dataSource==', props.dataSource)
    nextTick(() => {
      useChartMixin({
        refChart,
        myChart,
        setOptions
      }).initChart()
    })
  },
  {deep: true, immediate: true}
)

onMounted(_ => {
 
})

const setOptions = _ => {
  const option = {
    // title: {
    //   text: '菜系分布',
    //   left: 'center'
    // },
    tooltip: {
      trigger: 'item'
    },
    grid: {
      top: '30px',
      left: '15px',
      right: '15px',
      bottom: '0',
      containLabel: true
    },
    legend: [
      {
        orient: 'horizontal',
        x: 'center',
        top: '10px',
        icon: 'circle',
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
          color: '#666666'
        }
      }
    ],
    color: g_style.chartColorArr.split(','),
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '55%'],
        data: props.dataSource.data.map(({label, value}) => {
          return {
            value,
            name: label
          }
        }),
        minAngle: 5,
        label: {
          show: true,
          position: 'inside',
          formatter: '{d}%', // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
          color: '#fff',
          fontSize: 12
        },
        labelLine: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        }
      },
      // 中间显示总数据的系列（使用一个极小的透明饼图来承载中间文本）
      {
        type: 'pie',
        radius: ['30%', '30%'],
        center: ['50%', '55%'],
        label: {
          show: true,
          position: 'center',
          // 使用富文本模拟HTML标签效果
          formatter: ['{title|菜谱总数}\n', `{total|${props.dataSource.total}}`].join(''),
          rich: {
            title: {
              fontSize: 16,
              color: '#333',
              lineHeight: 24
            },
            total: {
              fontSize: 24,
              color: '#333',
              fontWeight: 'bold',
              lineHeight: 34
            }
          }
        },
        labelLine: {
          show: true
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: 'transparent' // 饼图透明，只显示文本
            }
          }
        ]
      }
    ]
  }
  myChart.value &&
    myChart.value.setOption &&
    myChart.value.setOption(option, true)
}
</script>
